<template>
  <div class="view-box">
    <div class="hd">团队管理</div>
    <div class="hb" justify="space-between">
      <a-row>
        <a-col :span="9" style="padding: 16px; border-right: 1px solid #e8e8e8">
          <div class="title-hd">
            <a-row>
              <a-col :span="4"> 分组管理 </a-col>
              <a-col :span="20">
                <div class="right-btn"><plus-circle-outlined /> &nbsp;&nbsp;添加成员</div>
              </a-col>
            </a-row>
          </div>
          <div style="margin-top: 10px">
            <BaseTree
              :show-search="false"
              :checked-keys="checkedKeys"
              :tree-data="treeData2"
              :default-expand-all="false"
              :block-node="true"
              :check-strictly="false"
              @on-check="onCheck"
              @on-select="onSelect"
              @on-click-item="onClickItem"
            >
              <template #actionArea="{ id, children }">
                <a-popover placement="bottom">
                  <template #content>
                    <div class="power-content-view-action">
                      <p @click.stop="onDeleGroup(id)"><delete-outlined /><span class="btn-title">删除</span></p>
                      <template v-if="children">
                        <p @click.stop="onGroupRename(id)"><edit-outlined /><span class="btn-title">重命名</span></p>
                        <p @click.stop="onGroupAddMember(id)"><usergroup-add-outlined /> <span class="btn-title">添加成员</span></p>
                        <p @click.stop="onAddChildGroup(id)"><share-alt-outlined /><span class="btn-title">新增子分组</span></p>
                      </template>
                    </div>
                  </template>
                  <p class="elli-view" @click.prevent><ellipsis-outlined /></p>
                </a-popover>
              </template>
            </BaseTree>
          </div>
        </a-col>

        <a-col :span="15" style="padding: 16px">
          <div class="title-hd">
            <a-row>
              <a-col :span="24"> 已经选择的成员列表 </a-col>
            </a-row>
          </div>
          <BaseTablePagination :columns="columns" :table-data="tableDataTest" :loading="loading" :toolbar="{ isTabbar: false }" :scroll="{ x: '100%', y: '100%' }"> </BaseTablePagination>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import BaseTree from "@/components/Basics/BaseTree.vue"
import BaseTablePagination from "@/components/Basics/BaseTablePagination.vue"
import { ModalConfirm } from "@/common/Modal"

const checkedKeys = ref(["203", "202"])
const treeData2 = reactive([
  {
    name: "智能院",
    id: "400",
    children: [{ id: "104", name: "欣欣2" }],
  },

  {
    name: "我的未分组成员",
    id: "200",
    children: [
      { id: "201", name: "王学理" },
      { id: "202", name: "金华" },
    ],
  },
])

const onCheck = (ids: string[], item: object): void => {
  console.log("onCheck ...", ids, item)
  checkedKeys.value = ids
}

const onSelect = (ids: string[], item: object): void => {
  console.log("onSelect ...", ids, item)
  checkedKeys.value = ids
}

// const onClickItem = (id: string): void => {
//   console.log("onClickItem ...", id)
// }

const loading = ref<boolean>(false)
const columns = reactive([
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    width: 160,
  },
  {
    title: "用户名",
    dataIndex: "name",
    id: "name",
  },
  {
    title: "邮箱",
    dataIndex: "address",
    id: "address",
  },
])

const tableDataTest = []

const onClickItem = (id: string): void => {
  console.log("onClickItem")
}

//分组删除 | 删除成员
const onDeleGroup = (id: string): void => {
  console.log(id)
  ModalConfirm({
    // 确定ajax
    onOK: function () {
      return new Promise((resolve, reject): any => {
        resolve("ok")
      })
    },
  })
}

//分组重命名
const onGroupRename = (id: string): void => {
  console.log(id)
}

//分组加成员
const onGroupAddMember = (id: string): void => {
  console.log(id)
}

//分组添加子分组
const onAddChildGroup = (id: string): void => {
  console.log(id)
}
</script>

<style lang="less" scoped>
.view-box {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .hd {
    padding: 12px;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
  }

  .hb {
    .title-hd {
      height: 30px;
      :deep(.ant-row) {
        height: 100%;
      }
      border-bottom: 1px solid #e8e8e8;
      .right-btn {
        text-align: right;
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
    }
  }
}

//tree右侧弹出菜单
.power-content-view-action {
  p {
    padding: 5px 0;
    cursor: pointer;
    transition: 0.3s ease-in;
    &:hover {
      color: #1890ff;
    }

    span {
      margin: 0 6px;
    }
  }
}
</style>
